<template>
  <div class="chart"></div>
</template>

<script setup name="LineChart">
// 柱状图
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'
import { emitter } from '@/utils/EventBus.js'
import { Btn4, Btn5, Btn6, Btn7 } from '@/store/modules/indexBtnDefault.js'

const emit = defineEmits(['changeBtn'])

const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [120, 200, 150, 80, 70, 110, 130]
      }
    }
  }
})

let chartInstance = null

var planePath =
  'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'

const fengjiUrl = new URL('@/assets/images/map-view/风机.png', import.meta.url)
  .href
const fzsdUrl = new URL(
  '@/assets/images/map-view/负载+受端.png',
  import.meta.url
).href
const sdUrl = new URL('@/assets/images/map-view/送端.png', import.meta.url).href

const fzsdStyle = {
  symbol: 'image://' + fzsdUrl,
  symbolSize: [118, 100]
}

const sdStyle = {
  symbol: 'image://' + sdUrl,
  symbolSize: [71, 60]
}

const fengjiStyle = {
  symbol: 'image://' + fengjiUrl,
  symbolSize: [18, 30]
}

// 交叉节点
const crossNode = [
  // 1列
  {
    index: 0,
    value: [150, 950]
  },
  {
    index: 1,
    value: [150, 550]
  },
  {
    index: 2,
    value: [150, 150]
  },
  /// ---------------2列，1组
  {
    index: 3,
    value: [250, 1100]
  },
  {
    index: 4,
    value: [250, 1000]
  },
  {
    index: 5,
    value: [250, 950]
  },
  {
    index: 6,
    value: [250, 900]
  },
  {
    index: 7,
    value: [250, 800]
  },
  // ---------2列，2组
  {
    index: 8,
    value: [250, 700]
  },
  {
    index: 9,
    value: [250, 600]
  },
  {
    index: 10,
    value: [250, 550]
  },
  {
    index: 11,
    value: [250, 500]
  },
  {
    index: 12,
    value: [250, 400]
  },
  // ---------2列，3组
  {
    index: 13,
    value: [250, 300]
  },
  {
    index: 14,
    value: [250, 200]
  },
  {
    index: 15,
    value: [250, 150]
  },
  {
    index: 16,
    value: [250, 100]
  },
  {
    index: 17,
    value: [250, 0]
  }
]

const listData = [
  {
    index: 0,
    name: '负荷',
    value: [0, 550],
    itemStyle: {
      color: '#00b441'
    },
    ...fzsdStyle
  },
  {
    index: 1,
    name: '受端换流站',
    value: [100, 550],
    itemStyle: {
      color: '#cec1db'
    },
    ...fzsdStyle
  },
  {
    index: 2,
    name: '送端换流站1',
    value: [200, 950],
    itemStyle: {
      color: '#ffbf00'
    },
    ...sdStyle
  },
  {
    index: 3,
    name: '海上风机1',
    value: [300, 1100],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 4,
    name: '海上风机2',
    value: [300, 1000],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 5,
    name: '海上风机3',
    value: [300, 900],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 6,
    name: '海上风机4',
    value: [300, 800],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 7,
    name: '送端换流站2',
    value: [200, 550],
    itemStyle: {
      color: '#ffbf00'
    },
    ...sdStyle
  },
  {
    index: 8,
    name: '海上风机5',
    value: [300, 700],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 9,
    name: '海上风机6',
    value: [300, 600],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 10,
    name: '海上风机7',
    value: [300, 500],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 11,
    name: '海上风机8',
    value: [300, 400],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 12,
    name: '送端换流站3',
    value: [200, 150],
    itemStyle: {
      color: '#ffbf00'
    },
    ...sdStyle
  },
  {
    index: 13,
    name: '海上风机9',
    value: [300, 300],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 14,
    name: '海上风机10',
    value: [300, 200],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 15,
    name: '海上风机11',
    value: [300, 100],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  },
  {
    index: 16,
    name: '海上风机12',
    value: [300, 0],
    itemStyle: {
      color: '#00b2f6'
    },
    ...fengjiStyle
  }
]

const lineData = [
  {
    coords: [
      listData[3].value,
      crossNode[3].value, // 交叉节点2列
      crossNode[5].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[4].value,
      crossNode[4].value, // 交叉节点2列
      crossNode[5].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[5].value,
      crossNode[6].value, // 交叉节点2列
      crossNode[5].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[6].value,
      crossNode[7].value, // 交叉节点2列
      crossNode[5].value // 交叉节点2列
    ]
  },
  {
    coords: [
      crossNode[5].value, // 交叉节点2列
      listData[2].value,
      crossNode[0].value,
      crossNode[1].value
    ]
  },
  // --------
  {
    coords: [
      listData[8].value,
      crossNode[8].value, // 交叉节点2列
      crossNode[10].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[9].value,
      crossNode[9].value, // 交叉节点2列
      crossNode[10].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[10].value,
      crossNode[11].value, // 交叉节点2列
      crossNode[10].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[11].value,
      crossNode[12].value, // 交叉节点2列
      crossNode[10].value // 交叉节点2列
    ]
  },
  {
    coords: [
      crossNode[10].value, // 交叉节点2列
      listData[7].value,
      crossNode[1].value
    ]
  },
  // ---------
  {
    coords: [
      listData[13].value,
      crossNode[13].value, // 交叉节点2列
      crossNode[15].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[14].value,
      crossNode[14].value, // 交叉节点2列
      crossNode[15].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[15].value,
      crossNode[16].value, // 交叉节点2列
      crossNode[15].value // 交叉节点2列
    ]
  },
  {
    coords: [
      listData[16].value,
      crossNode[17].value, // 交叉节点2列
      crossNode[15].value // 交叉节点2列
    ]
  },
  {
    coords: [
      crossNode[15].value, // 交叉节点2列
      listData[12].value,
      crossNode[2].value,
      crossNode[1].value
    ]
  },
  ///// -----------最后
  {
    coords: [crossNode[1].value, listData[1].value, listData[0].value]
  }
]

async function chartInit() {
  await nextTick()

  if (!chartInstance) {
    chartInstance = echarts.init(proxy.$el)
  }

  chartInstance.setOption(
    {
      xAxis: {
        show: false,
        type: 'value'
      },
      yAxis: {
        show: false,
        type: 'value',
        borderRadius: 50
      },
      series: [
        {
          name: '流动线',
          type: 'lines',
          polyline: true,
          coordinateSystem: 'cartesian2d',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
          },
          lineStyle: {
            normal: {
              color: '#3ed4ff',
              width: 0,
              curveness: 0.2
            }
          },
          data: lineData
        },
        {
          name: '实线',
          type: 'lines',
          polyline: true,
          coordinateSystem: 'cartesian2d',
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              color: '#ffa022',
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: lineData
        },
        {
          name: '节点',
          // type: 'effectScatter',
          type: 'scatter',
          zlevel: 2,
          coordinateSystem: 'cartesian2d',
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'bottom',
              formatter: '{b}'
            }
          },
          symbolSize: function (val, item) {
            // console.log(val, item)
            return item?.data?.size || 30
          },
          data: listData.filter((_, i) => i != 1) // 干掉受端换流站
        }
      ]
    },
    true
  )

  chartInstance.on('click', function (params) {
    // 控制台打印数据的名称
    // console.log(params.name)
    if (params.name.includes('负荷')) {
      // console.log(6)

      const mangeBtn = Object.assign({}, Btn4)
      mangeBtn.form = [...Btn4.form, ...Btn5.form]
      console.log(mangeBtn)
      emit('changeBtn', mangeBtn)
    }
    if (params.name.includes('送端换流站')) {
      // console.log(6)
      emit('changeBtn', Btn6)
    }
    if (params.name.includes('海上风机')) {
      // console.log(7)
      emit('changeBtn', Btn7)
    }
  })
}

onMounted(() => {
  chartInit()
})

// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
